<div class="user">
  <div class="user-header">
    <ul>
      <li>管理员</li>
      <li>编辑</li>
      <li>会员</li>
    </ul>
  </div>  
  <div class="user-container">
    <div class="user-container_root">
      <div class="user-option">
        <button id="user-add_root" type="button" class="btn btn-primary">新增</button>
      </div>
      <div class="user-root">
        <div class="user-root_content">
    
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="user-modalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="user-modalLabel">新增用户信息</h4>
          </div>
          <div class="modal-body">
            <!-- 表单 -->
            <form class="form-horizontal">
              <div class="form-group">
                <label for="user-username">用户名</label>
                <input type="text" class="form-control" id="user-username" placeholder="请输入用户名">
              </div>
              <div class="form-group">
                <label for="user-role">角色</label>
                <select class="form-control" id="user-role" placeholder="请选择">
                  <option>admin</option>
                  <option>edit</option>
                  <option>user</option>
                </select>
              </div>
              <div class="form-group">
                <label for="user-password">密码</label>
                <input type="password" class="form-control" id="user-password" placeholder="请输入密码">
              </div>
              <div class="form-group">
                <label for="user-password">重复密码</label>
                <input type="password" class="form-control" id="user-repassword" placeholder="请重复密码">
              </div>
              <div class="form-group">
                <label for="user-nickname">真实姓名</label>
                <input type="text" class="form-control" id="user-nickname" placeholder="请输入真实姓名">
              </div>
              <div class="form-group">
                <label for="user-email">email</label>
                <input type="text" class="form-control" id="user-email" placeholder="请输入电子邮箱">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="user-save" type="button" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div class="user-container_edit">
      <div class="user-option">
        <button id="user-add_edit" type="button" class="btn btn-primary">新增</button>
      </div>
      <div class="user-edit">
        <div class="user-edit_content">
    
        </div>
      </div>
    </div>
    <div class="user-container_member">
      <div class="user-member">
        <div class="user-member_content">
    
        </div>
      </div>
    </div>
    
  </div>
  
</div>
<script>
  //实现页面交互
  $(function(){
    $('.user-header li').click(function(){
      let text = $(this).text();
      // console.log(text);
      if(text == '管理员'){
        $('.user-header li:first-child').css({
          border:'1px solid #e2e2e2',
          borderBottom:'none'
        });
        $('.user-header li:nth-child(2)').css('border','none');
        $('.user-header li:nth-child(3)').css('border','none');
        $('.user-container_root').css('display','block');
        $('.user-container_edit').css('display','none');
        $('.user-container_member').css('display','none');
      }else if(text == '编辑'){
        $('.user-header li:first-child').css('border','none');
        $('.user-header li:nth-child(2)').css({
          border:'1px solid #e2e2e2',
          borderBottom:'none'
        });
        $('.user-header li:nth-child(3)').css('border','none');
        $('.user-container_root').css('display','none');
        $('.user-container_edit').css('display','block');
        $('.user-container_member').css('display','none');
      }else if(text == '会员'){
        $('.user-header li:first-child').css('border','none');
        $('.user-header li:nth-child(2)').css('border','none');
        $('.user-header li:nth-child(3)').css({
          border:'1px solid #e2e2e2',
          borderBottom:'none'
        });
        $('.user-container_root').css('display','none');
        $('.user-container_edit').css('display','none');
        $('.user-container_member').css('display','block');
      }
    })
    $('.user-header li:first-child').click();
  })
  //修改用户的状态
  $('.user-member_content').on('click','.status',function(){
    // 获取当前用户id
    var id = $(this).attr('flag');

    // 根据id查询用户信息
    myAjax('/manager/user/findUserById','get',{id:id},function(res){
      // 根据用户信息中状态的不同来封装不同的参数
      var obj = {
        id:id,
          status:!res.data.enabled
      }
      myAjax('/manager/user/changeStatus','post',obj,function(res){
        alert(res.message)
        findAll();
      })
    })
  })
  
  var userData =[];
  var currentUser ={};
  findAll();
  //获取栏目数据，遍历数据，生成数据
  function findAll(){
    myAjax('/manager/user/findAllUser','get',{},function(res){
      $('.user-root_content').empty();
      $('.user-edit_content').empty();
      $('.user-member_content').empty();

      userData = res.data;
      var admin = res.data.filter(function(item){
        return item.role == 'admin';
      })
      var editor = res.data.filter(function(item){
        return item.role == '';
      })
      var user = res.data.filter(function(item){
        return item.role == 'user';
      })

      admin.forEach(function(item) {
        var $tr = $(`
          <div class="user-content-item">
          <img src="./images/1.jpg" alt="" width="128px" height="128px">
          <div>`+'用户名：'+item.username+`</div>
          <div>`+'真实姓名：'+item.nickname+`</div>
          <div>`+'用户ID：'+item.id+`</div>
          <div>`+'email：'+item.email+`</div>
          <div>操作：
            <span class="user-delete" flag="`+item.id+`"><i class="fa fa-trash-o" title="删除"></i></span>
            <span class="user-write" flag="`+item.id+`"><i class="fa fa-pencil-square-o" title="修改"></i></span>
          </div>
        </div>
        `);
        $('.user-root_content').append($tr);
      })
      editor.forEach(function(item) {
        var $ttr = $(`
          <div class="user-content-item">
            <img src="./images/2.jpg" alt="" width="128px" height="128px" style="border-radius:50%">
            <div>`+'用户名：'+item.username+`</div>
            <div>`+'真实姓名：'+item.nickname+`</div>
            <div>`+'用户ID：'+item.id+`</div>
            <div>`+'email：'+item.email+`</div>
            <div>操作：
              <span class="user-delete" flag="`+item.id+`"><i class="fa fa-trash-o" title="删除"></i></span>
              <span class="user-write" flag="`+item.id+`"><i class="fa fa-pencil-square-o" title="修改"></i></span>
            </div>
          </div>
        `);
        $('.user-edit_content').append($ttr);
      })      
      user.forEach(function(item) {
        var $tttr = $(`
          <div class="user-content-item">
          <img src="./images/3.jpg" alt="" width="128px" height="128px">
          <div>`+'用户名：'+item.username+`</div>
          <div>`+'真实姓名：'+item.nickname+`</div>
          <div>`+'用户ID：'+item.id+`</div>
          <div>`+'email：'+item.email+`</div>
          <div class="status" flag="`+item.id+`">`+'状态：'+(item.enabled ? '<button class="btn btn-info" width="35px" height="20px">正常</button>' : '<button class="btn btn-danger" width="35px" height="20px">禁言中</button>')+`</div>
        `);
        $('.user-member_content').append($tttr);

      })
      });
    }
  
  //新增  清空内部表单内容，显示模态框
  //管理员界面
  $('#user-add_root').click(function () {
    // 显示模态框
    currentUser = {};
    //将栏目对象中的数据设置到表单中
    $('#user-username').val('');
    $('#user-password').val('');
    $('#user-repassword').val('');
    $('#user-nickname').val('');
    $('#user-email').val('');
    $('#user-role').val('');

    
    $('#user-modalLabel').text('新增用户信息');
    $('#user-modal').modal('show');
  });
  //编辑界面
  $('#user-add_edit').click(function () {
    // 显示模态框
    currentUser = {};
    //将栏目对象中的数据设置到表单中
    $('#user-username').val('');
    $('#user-password').val('');
    $('#user-repassword').val('');
    $('#user-nickname').val('');
    $('#user-email').val('');
    $('#user-role').val('');

    
    $('#user-modalLabel').text('新增用户信息');
    $('#user-modal').modal('show');
  });
  //修改  时间代理，设置模态框标题，设置表单内容，显示模态框
  //管理员界面
  $('.user-root_content').on('click', '.user-write', function () {
    var id = $(this).attr('flag');
    // console.log(id);
    currentUser = userData.filter(function (item) {
      return item.id == id;
    })[0];
    $('#user-username').val(currentUser.username);
    $('#user-password').val(currentUser.password);
    $('#user-repassword').val(currentUser.password);
    $('#user-nickname').val(currentUser.nickname);
    $('#user-email').val(currentUser.email);
    $('#user-role').val(currentUser.role);
    $('#user-modalLabel').text('修改用户信息');

    $('#user-modal').modal('show');
  })
  //编辑界面
  $('.user-edit_content').on('click', '.user-write', function () {
    var id = $(this).attr('flag');
    currentUser = userData.filter(function (item) {
      return item.id == id;
    })[0];
    $('#user-username').val(currentUser.username);
    $('#user-password').val(currentUser.password);
    $('#user-repassword').val(currentUser.password);
    $('#user-nickname').val(currentUser.nickname);
    $('#user-email').val(currentUser.email);
    $('#user-role').val(currentUser.role);
    $('#user-modalLabel').text('修改用户信息');

    $('#user-modal').modal('show');
  })
  //保存,模态框内的确定按钮 获取数据，验证数据，访问后台保存，更新数据，关闭模态框
  $('#user-save').click(function(){
    //获取表单数据
    var username = $('#user-username').val();
    var password = $('#user-password').val();
    var repassword = $('#user-repassword').val();
    var nickname = $('#user-nickname').val();
    var email = $('#user-email').val();
    var role = $('#user-role').val();
    //验证数据
    if(username&&password&&repassword){
      //封装数据，保存
      var obj = {
        id:currentUser.id,
        username:username,
        password:password,
        repassword:password,
        nickname:nickname,
        email:email,
        role:role
      };
      myAjax('/manager/user/reg','post',obj,function(res){
        if(res.status ==200){
          findAll();
          $('#user-modal').modal('hide');
        }else{
          alert('保存失败');
        }
      })
    }else{
      alert('请输入所有信息');
    }
  })

  //删除
  //管理员界面
  $('.user-root_content').on('click', '.user-delete', function () {
    // 获取要删除的id
    var id = $(this).attr('flag');
    console.log(id);
    var result = confirm('是否确认删除?');
    if (result) {
      // 删除  与后台进行数据交互
      myAjax('/manager/user/deleteUserById', 'get', { id: id }, function (res) {
        if (res.status == 200) {
          alert(res.message);
          // 更新页面的数据
          findAll();
        } 
      }, function (err) {
        alert(err.message);
      });
    }
  });
  //编辑界面
  $('.user-edit_content').on('click', '.user-delete', function () {
    // 获取要删除的id
    var id = $(this).attr('flag');
    var result = confirm('是否确认删除?');
    if (result) {
      // 删除  与后台进行数据交互
      myAjax('/manager/user/deleteUserById', 'get', { id: id }, function (res) {
        if (res.status == 200) {
          // alert('删除成功');
          // 更新页面的数据
          findAll();
        } else {
          alert('删除失败!');
        }
      }, function (err) {
        alert('删除失败');
      });
    }
  });




</script>